<template>
	<view>
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="订单页面" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<view class="order_box">
			<!-- head区域 -->
			<view class="head">
				<view class="useraddress">
					<view class="addressinfo" v-if="localBuffer" hover-class="touchOpacity" @click="addressAdd">
						<text space="ensp" class="addressinfo_top">{{address.username}} {{address.userphone}}</text>
						<view class="addressinfo_bottom">
							<text class="addressinfo_bottom_status" v-if="address.status ==1">默认</text>
							<text class="addressinfo_bottom_label" v-if="address.label != '' ">{{address.label}}</text>
							<text class="addressinfo_bottom_useraddress">{{address.location+address.useraddress}}</text>
						</view>
					</view>
					<view class="addressinfo" v-else>
						<u-button type="warning" :plain="true" @click="addressAdd">+点击完善收货地址</u-button>
					</view>
				</view>
			</view>

			<view class="order_ticket">
				<image src=""></image>
				<text>品牌精选</text>
				<text>以免运费 |</text>
				<text>领券</text>
			</view>
			<!-- 商品信息区域 -->
			<view class="order_view">
				<!-- 明日来写购物车基本信息 -->
				<view class="cartInfochild" v-for="(item,index) in orders" :key="index">
					<!-- 图片 -->
					<image :src="item.img" class="cartInfo_image"></image>
					<!-- 信息 -->
					<view class="cartInfo_info">
						<text>{{item.goodsname}}</text>
						<text>￥
							<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}</text>
						</text>
						<text>七天无理由退货</text>
					</view>
					<!-- 加减数量 -->
					<view class="cartInfo_num">
						<label> ×{{item.num}}</label>
					</view>
				</view>
			</view>

			<!-- 具体详细1 -->
			<view class="resDetail">
				<view hover-class="touchOpacity">
					<label for="" class="resDetail_title">发票类型</label>
					<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">不开发票 ></label>
				</view>
				<view class="">
					<label for="" class="resDetail_title">售后免邮</label>
					<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">部分商家赠送</label>
				</view>
				<view class="">
					<label for="" class="resDetail_title">卖家留言</label>
					<label for=""
						style="margin-right:40rpx;color:#666666;font-size: 24rpx;">填写内容需要与商家协商并确认，45字以内</label>
				</view>
			</view>

			<!-- 具体详细2 -->
			<view class="resDetail" style="margin:10rpx 0 98rpx;">
				<view class="">
					<label for="" class="resDetail_title">商品金额</label>
					<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">￥200</label>
				</view>
				<view class="">
					<label for="" class="resDetail_title">优惠活动</label>
					<label for="" style="margin-right:40rpx;color:#FF6040;font-size: 24rpx;">-￥200</label>
				</view>
				<view hover-class="touchOpacity">
					<label for="" class="resDetail_title">优惠券</label>
					<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">更多优惠券 ></label>
				</view>
			</view>
			<!-- 确认订单按钮 -->
			<view class="foot">
				<view class="foot_left">
					<text class="foot_left_count" space="ensp">合计<text>￥{{countmoney}}</text></text>
					<text class="foot_left_ticket" space="ensp">已免运费 <text>已优惠￥100</text></text>
				</view>
				<view class="foot_right" hover-class="touchOpacity" @click="goPay">确认订单</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [], // 数据
				countmoney: 0, // 价格
				countnumber: 0, // 数量
				address: {
					status: 1,
					label: '公司',
					username: '李四',
					userphone: 13716078900,
					location: '北京市市辖区朝阳区',
					useraddress: '五方桥基地'
				}, //初始化收货地址
				localBuffer: false, //初始化收货地址开关
			}
		},
		onLoad(option) {
			this.orders = uni.getStorageSync('carts').carts
			this.countmoney = uni.getStorageSync('carts').totalPrice
			this.countnumber = uni.getStorageSync('carts').totalNum
			// console.log(this.countnumber);
			// console.log(uni.getStorageSync('carts'));
			if(option.addr){
				this.address = JSON.parse(option.addr)
				this.localBuffer = true
			}else{
				this.getAddress()
			}
			// console.log(this.orders);
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			// 跳转支付页面
			async goPay(){
				let {token,uid} = uni.getStorageSync('userInfo');
				let countmoney = this.countmoney
				let countnumber = this.countnumber
				let addressid = this.address.id
				let idstr = this.orders.map(item => {
					return item.id
				})
				idstr = idstr.join(',')
				// console.log(uid,countmoney,countnumber,addressid,idstr);
				// return
				let options = {
					url:'/api/orderadd',
					data:{
						uid,countmoney,countnumber,addressid,idstr
					},
					method:'POST'
				}
				// console.log(options);
				let result = await this.$http(options);
				console.log(result);
				uni.setStorageSync('outTradeNo',result.data.list.outTradeNo)
				// return
				uni.navigateTo({
					url:'/pages/pay/pay'
				})
			},
			// 跳转地址列表页面
			addressAdd(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			},
			// 获取默认收获地址
			async getAddress(){
				let {token,uid} = uni.getStorageSync('userInfo');
				let options = {
					url:'/api/addresslist',
					data:{
						status:1,
						uid
					},
					header:{authorization:token}
				}
				let result = await this.$http(options)
				console.log(result);
				if (result.data.code == 200) {
					if(result.data.list == null){ // 请求成功但是没有默认地址
						this.localBuffer = false
						return
					}
					this.address = result.data.list[0]
					this.localBuffer = true
				} else if (result.data.code == 403) {
					this.localBuffer = false
					uni.showModal({
						title: '请重新登录',
						icon: 'error'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}else{
					uni.showToast({
						title:'网络故障',
						icon:'error'
					})
					this.localBuffer = false
				}
			}
		}
		
	}
</script>

<style scoped>
	/* 引入样式 */
	@import url("@/static/css/order.css");
</style>